<template>
  <div class="w-full h-210px flex items-center bg-mask-5 mb-23px" style="border: 4px solid #fff">
    <div class="w-170px h-full bg-coupon relative flex flex-col items-center">
      <div class="absolute left-0 bottom-0"><img :src="BlessingBagIcon" alt="" /></div>
      <div class="font-bold text-20px text-white tracking-wider mt-15px">限时秒杀</div>
      <div class="mt-23px"><img :src="SeckillElctric" alt="" /></div>
      <div class="text-16px leading-21px tracking-wider text-white font-medium mt-4px">
        {{ props.name }}
      </div>
      <div class="text-10px tracking-wider text-white leading-12p mt-6px">{{ props.content }}</div>
      <div class="font-medium text-12px leading=18px tracking-wider text-white mt-6px">
        {{ timeSection }}
      </div>
      <div class="flex mt-10px">
        <n-countdown :duration="duration" :render="renderCountdown" />
      </div>
    </div>
    <div
      class="ml-9px w-29px h-29px mr-13px"
      :class="{ 'cursor-not-allowed': active <= 0, 'cursor-pointer': active > 0 }"
      @click="goprev"
    >
      <img :src="SecKillPrev" alt="" />
    </div>
    <div class="w-628px h-full relative overflow-hidden">
      <div class="flex absolute top-22px left-0" :style="{ left: `-${active * 168}px` }">
        <div v-for="(item, index) in list" :key="index" class="flex items-center cursor-pointer">
          <div class="flex flex-col items-center">
            <div class="w-126px h-126px">
              <img :src="item.img" class="w-126px h-126px" alt="" />
            </div>
            <div class="text-white text-12px leading-18px h-18px">{{ item.name }}</div>
            <div class="color-coupon">￥{{ item.price }}</div>
          </div>
          <div class="w-2px h-84px mx-20px" style="background: rgba(234, 234, 234, 0.4)"></div>
        </div>
      </div>
    </div>
    <div
      class="ml-13px w-29px h-29px"
      :class="{
        'cursor-not-allowed': list.length - 4 <= active,
        'cursor-pointer': list.length - 4 > active
      }"
      @click="gonext"
    >
      <img :src="SecKillNext" alt="" />
    </div>
    <div class="flex flex-col items-center ml-10px">
      <div class="text-14px font-bold tracking-wider text-white h-21px leading-21px">
        限时更多抢购
      </div>
      <div
        class="mt-7px w-105px h-32px text-center leading-32px bg-coupon text-white text-14px tracking-wider rounded-7px cursor-pointer"
        @click="goseckill"
      >
        点击进入
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import BlessingBagIcon from '@renderer/assets/blessingBag.svg'
import SeckillElctric from '@renderer/assets/seckill_electric.svg'
import SecKillPrev from '@renderer/assets/seckkillprev.svg'
import SecKillNext from '@renderer/assets/seckillnext.svg'
import { computed, h, ref } from 'vue'
import dayjs from 'dayjs'
import { CountdownProps } from 'naive-ui'
import { useRouter } from 'vue-router'

const active = ref<number>(0)

const router = useRouter()

const props = defineProps({
  name: String,
  content: String,
  start: Date,
  end: Date,
  now: Date
})

const list = ref<any>([
  {
    name: '酸奶杨枝甘露',
    price: 12,
    img: 'http://192.168.16.251:7001/public/static/桂花乌龙茶3-666865661448979.png'
  },
  {
    name: '荔枝玫瑰奶茶',
    price: 12,
    img: 'http://192.168.16.251:7001/public/static/桂花乌龙茶3-666865661448979.png'
  },
  {
    name: '草莓波波奶茶',
    price: 12,
    img: 'http://192.168.16.251:7001/public/static/桂花乌龙茶3-666865661448979.png'
  },
  {
    name: '多肉葡萄',
    price: 12,
    img: 'http://192.168.16.251:7001/public/static/桂花乌龙茶3-666865661448979.png'
  },
  {
    name: '桂花乌龙茶',
    price: 12,
    img: 'http://192.168.16.251:7001/public/static/桂花乌龙茶3-666865661448979.png'
  }
])
const timeSection = computed(() => {
  return `${dayjs(props.start).format('HH:mm')} - ${dayjs(props.end).format('HH:mm')}`
})
const duration = computed(() => {
  console.log(dayjs(props.end).valueOf() - dayjs(props.now).valueOf())
  return dayjs(props.end).valueOf() - dayjs(props.now).valueOf()
})
const renderCountdown: CountdownProps['render'] = ({ hours, minutes, seconds }) => {
  return h(
    'div',
    {
      class: 'flex items-center'
    },
    [
      h('div', { class: 'main-time-zone' }, hours > 9 ? hours : `0${hours}`),
      h('div', { class: 'seconday-time-zone' }, ':'),
      h('div', { class: 'main-time-zone' }, minutes > 9 ? minutes : `0${minutes}`),
      h('div', { class: 'seconday-time-zone' }, ':'),
      h('div', { class: 'main-time-zone' }, seconds > 9 ? seconds : `0${seconds}`)
    ]
  )
}

const goprev = () => {
  if (active.value <= 0) return
  active.value -= 1
}

const gonext = () => {
  if (list.value.length - 4 <= active.value) return
  active.value += 1
}

const goseckill = () => {
  router.replace({ name: 'Seckill' })
}
</script>

<style>
.main-time-zone {
  background-color: #343434;
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.seconday-time-zone {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  margin-left: 3px;
  margin-right: 3px;
}
</style>
